<template>
	<view class="container">
		<view class="header-pannel">
			<view class="null-pannel"></view>
			<view class="example">
				<uni-forms ref="form" :model="queryParams" labelWidth="80px">
					<uni-forms-item label="订单编号" name="orderCode" class="item-margin">
						<uni-easyinput v-model="queryParams.orderCode" placeholder="请输入订单编号" :focus="inpFocusOrder"
							@blur="inpBlurOrder" ref="Focus" value="" @confirm="getHandle" />
					</uni-forms-item>
					<uni-forms-item label="箱码" name="cartonCode" class="margin0">
						<uni-easyinput v-model="queryParams.cartonCode" placeholder="请输入箱码" :focus="inpFocusCarton"
							@blur="inpBlurCarton" ref="nextFocus" @confirm="handlebind" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>

		<view class="table1">
			<uni-table ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange"
				class="tableAll">
				<uni-tr>
					<uni-th align="center">织板编码</uni-th>
					<uni-th align="center">箱码</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in listData" :key="index">
					<uni-td align="center">{{ item.code }}</uni-td>
					<uni-td align="center">{{ item.cartonCode }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="footer-btn">
			<button type="primary" @click="submit">提交</button>
		</view>

		<!-- 弹框 -->
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<view>
					<uni-forms ref="popform" :model="popParams" labelWidth="70px" class="popcontent">
						<!-- <uni-section title="" type="line" class="popcontent"> -->
						<!-- <uni-list> -->
						<view class="padding1" v-for="(item,index) in listData2" :key="index">
							<view class="margin-bottom-xs">{{ item.cartonCode }}</view>
							<uni-forms-item label="内码数量" name="num" class="margin0">
								<uni-easyinput v-model="numArry[index]" class="selectInput" @blur="getInput(index)"
									placeholder="请输入内码数量" />
							</uni-forms-item>
							<view class="border1"></view>
						</view>
						<view class="">
							<button class="mini-btn" type="primary" size="mini" @click="allSave">确定</button>
							<button class="mini-btn float-right" type="default" size="mini"
								@click="dialogClose">取消</button>
						</view>

					</uni-forms>

				</view>
			</uni-popup>
		</view>
		<!-- 提示框 -->
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

	</view>

</template>

<script>
	import {
		getbindBoxCode,
		bindBoxCodeEdit,
		bindBoxCodeSave,
		bindBoxCodeNumQuery,
		bindBoxCodeNumUpdate
	} from "@/api/longyi/bindBoxCode/Index.js"

	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				inpFocusOrder: true,
				inpFocusCarton: false,
				multipleFlag: true,
				popParams: {
					cartonCode: "",
					num: ""
				},
				cartonCode: "",
				numArry: [],
				queryParams: {
					pageSize: 10,
					pageNo: 1,
					orderCode: "",
					cartonCode: ""
				},
				listData: [],
				listData2: [],
				bindData: {
					orderCode: '',
					type: '',
					code: '',
					specification: '',
					cartonCode: ''
				},
				loading: false,
				rules: {
					orderCode: {
						rules: [{
							required: true,
							errorMessage: '订单编号不能为空'
						}]
					}
					// ,
					// cartonCode: {
					//   rules: [{
					//     required: true,
					//     errorMessage: '箱码不能为空'
					//   }]
					// }
				},
				rules2: {
					cartonCode: {
						rules: [{
							required: true,
							errorMessage: '箱码不能为空'
						}]
					}
				}
			}
		},
		// onLoad() {
		//   this.getUser(this.queryParams)
		// },
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			inpBlurOrder(inpDom) {
				this.inpFocusOrder = false
			},
			inpBlurCarton(inpDom) {
				this.inpFocusCarton = false
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				//console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			dialogClose() {
				//	console.log('点击关闭')
				this.$refs.alertDialog.close()
			},
			getHandle() {
				this.getUser()
				this.inpFocusCarton = true
			},
			getUser(ref) {
				//获取该订单号下的物料
				// console.log(this.queryParams)
				this.$refs.form.validate().then(res => {
					// console.log(res)
					getbindBoxCode(this.queryParams).then(response => {
						// console.log(response)
						this.listData = response.data.list
					})
				})
			},
			//比对箱码和织板编码
			handlebind() {
				const cartonCodesPra = this.queryParams.cartonCode //扫描的箱码
				if (!this.queryParams.cartonCode.includes('_')) {
					this.$modal.msgError("请输入正确的箱码！")
					return
				}
				const cartonMaterialCode = cartonCodesPra.split('_')
				const listArry = this.listData
				// console.log(cartonCodesPra+'---'+cartonMaterialCode[0]+'---'+JSON.stringify(this.listData))		
				for (let i in listArry) {
					// console.log(listArry[i])
					//     console.log(listArry[i].code)1.1.14.002_3.01_RK9991446
					// console.log(cartonMaterialCode[0]+'---'+listArry[i].code)
					if (cartonMaterialCode[0] === listArry[i].code) {
						// console.log(listArry[i])
						this.bindData.orderCode = listArry[i].orderCode
						this.bindData.type = listArry[i].type
						this.bindData.code = listArry[i].code
						this.bindData.specification = listArry[i].specification
						// if(this.multipleFlag){ //如果有多个物料
						// 	this.bindData.cartonCode = listArry[i].cartonCode + ',' + cartonCodesPra
						// } else {
						this.bindData.cartonCode = cartonCodesPra
						// }
						this.loading = true

						// console.log(this.bindData)
						bindBoxCodeEdit(this.bindData).then(response => {
							// console.log(response)
							this.inpFocusCarton = true
							console.log(this.inpFocusCarton)
							this.getUser()
							this.queryParams.cartonCode = ''
							// this.$refs.firstFocus.focused = false
							// this.$refs.nextFocus.focused = true


							this.$modal.msgSuccess("绑定成功！")
						})

						this.loading = false
					}
				}
			},
			submit(ref) {
				let cartonCodeArry = []
				// console.log(this.listData)
				if (this.listData.length <= 0) {
					return
				}
				for (let i in this.listData) {
					cartonCodeArry.push(this.listData[i].cartonCode)
					console.log(this.listData[i])
					if (!this.listData[i].cartonCode) {
						this.$modal.msgError("请扫描箱码！")
						return
					}
				}

				// console.log(this.queryParams.orderCode)
				const orderCodeData = {
					orderCode: this.queryParams.orderCode
				}
				// let flag = false
				bindBoxCodeSave(this.listData).then(response => {
					// console.log(response.data)
					// console.log(cartonCodeArry.every((item) => !item.cartonCode.includes(',')))
					const flag = cartonCodeArry.every((item) => {
						// console.log(item)
						// console.log(!item.includes(','))
						return !item.includes(',')
					})
					// console.log(flag)
					if (flag) {
						this.inpFocusOrder = true
						this.queryParams.orderCode = ''
						this.getUser()
						this.$modal.msgSuccess("扫描已完成！")
						return
					}

					bindBoxCodeNumQuery(orderCodeData).then(response2 => {
						// console.log(response2)
						this.listData2 = response2.data
						// console.log(this.listData2)

						for (let i in this.listData2) {
							// this.popParams.cartonCode = this.listData2[i].cartonCode

							// console.log(this.numArry[i])
							this.cartonCode = this.listData2[i].cartonCode
							// this.popParams.num = this.listData2[i].num
							this.numArry[i] = this.listData2[i].num
							this.dialogToggle('info')
						}
					})
				})
			},
			getInput(index) {
				// console.log(index)
				// console.log(this.numArry[index])
				this.listData2[index].num = this.numArry[index]
				// console.log(this.listData2[index].num)
				// console.log(this.numArry[index])
				// console.log(this.listData2[index])

			},
			allSave() {
				// console.log(this.listData2)
				bindBoxCodeNumUpdate(this.listData2).then(response => {
					// console.log(response)
					this.$refs.alertDialog.close()
					this.inpFocusOrder = true
					this.queryParams.orderCode = ''
					// this.$refs.firstFocus.focused = true
					this.getUser()
					this.$modal.msgSuccess("领料完成！")
					// this.listData = response.data.list
				})

			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;

		// margin: 10px auto;
		.item-margin.is-direction-left {
			margin-bottom: 15px !important;
		}

	}

	.margin0 {
		margin-bottom: 0 !important;
	}

	.header-pannel {
		position: fixed;
		width: 100%;
		top: 44px;
		z-index: 999;
	}

	.null-pannel {
		height: 10px;
		background: #f1f1f1;
	}

	.footer-btn {
		padding: 15px;
		background-color: #fff;
		// margin-top: 66px;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.container {
		overflow: hidden;
	}

	.popcontent {
		padding: 15px;
		border-radius: 11px;
		background-color: #fff;
		// height: 500px;
		// overflow-y: scroll;
	}

	.float-right {
		float: right;
	}

	.border1 {
		border: 0.5px solid #eee;
		margin: 15px 0;
	}

	.padding-bottom {
		padding: 15px;
	}

	.padding-top {
		padding: 10px;
	}

	.tableAll {
		word-break: break-all;
	}

	.table1 {
		margin-bottom: 90px;
		margin-top: 140px;
	}
</style>